////折线图数据统计
function mychart(){
    var myChart = echarts.init(document.getElementById('main3'));
    option = {
        title : {
            //x:'center',
            //y:'top',
            //show:true,
            //text: '借出还入曲线图',
            ////subtext: '纯属虚构'
            textStyle: {
                fontSize: 16,
                //fontWeight: 'bolder',
                color: '#41a5ad'          // 主标题文字颜色
            },
            padding: [0,0,80,10],
        },
        tooltip : {
            trigger: 'axis',
            show:false
        },
        color:['#61cb5f','#e9a10e'],///这个数组是设置对应的图例的颜色
        legend: {
            right:30,////图例整体组件离右边的距离
            //x: 'right',
            y: 'top',
            //padding: -1,
            orient:"horizontal",
            itemWidth:20,///设置图例组件整体的宽度
            itemHeight:8,////设置图例组件整体的高度
            data:[
                {name: '借出',
                textStyle:{color:"#91a1ba",fontSize:16},
                backgroundColor: '#60c960'
                },
                {name:'还入',
                    textStyle:{color:"#91a1ba",fontSize:16},
                    backgroundColor: '#c97d1f'
                }
            ],
            selected: {
                '借出' : true,
                '还入' : true
            },

        },
        toolbox: {
            show : false,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : false,
        xAxis : [
            {
                type : 'category',
                axisTick: {///去除刻度线
                    show: false
                },
                axisLine: {///坐标轴的颜色
                    lineStyle: {color: '#1d5564'}
                },
                boundaryGap : false,
                data : ['8:00','9:00','10:00','11:00','12:00','13:00','14:00'],
                splitLine:{
                    show: true,//显示网格线
                    lineStyle:{
                        color: ['#1d5564'],//网格的颜色
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel:{
                    textStyle:{
                        color:"#91a1ba",
                        align : 'left',
                        fontSize: 16

                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisTick: {//去除刻度线
                    show: false
                },
                axisLine: {///坐标轴的颜色
                    lineStyle: {color: '#1d5564'}
                },
                data : [0,100,200,300,400,500,600],
                splitLine:{
                    show: true,//去除网格线
                    lineStyle:{
                        color: ['#1d5564'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel:{
                    textStyle:{
                        color:"#91a1ba",
                        //align : 'left',
                        fontSize: 16
                    }
                }
            }
        ],
        grid:{
            x:60,
            y:30,
            x2:45,
            y2:40
        },
        series : [
            {
                name:'借出',
                type:'line',
                barWidth :4,
                data:[123,242,463,575,325,400,101,233,334,440,311,212,113,214,415,216,317,518,219,420],
                symbol: "circle",///设置折线拐点事实心圆，不是空心圆
                symbolSize: 9,//拐点大小
                smooth:true,///设置拐点线条比较平滑
                itemStyle : {
                    normal : {
                        label : {show: true},//设置显示每个拐点的数据
                        color:'#60c960',//设置折线拐点的颜色
                        //borderColor: "blue" , // 设置折线拐点边框的颜色，
                        lineStyle:{
                            color:'#60c960'///设置折线颜色
                        }

                    }
                }
            },
            {
                name:'还入',
                type:'line',
                barWidth :4,
                data:[242,334,163,375,425,299,401,233,134,140,211,312,113,514,215,316,417,518,119,220],
                symbol: "circle",
                symbolSize: 9,//拐点大小
                smooth:true,///设置拐点线条比较平滑
                itemStyle : {
                    normal : {
                        label : {show: true},
                        color:'#c97d1f',//设置折线点的颜色
                        //borderColor: "blue" , // 设置折线拐点边框的颜色，
                        lineStyle:{
                            color:'#c97d1f'///设置折线颜色
                        }
                    }
                }
            }
        ],
        borderColor:'#215563',
    };
    myChart.setOption(option);
    return myChart;
}
///借阅排行
///动效 zoomInUp
function rankMove(){
    //var imgs=$('#rank_books').find('img').get(0);//获得所有的图书
    //var index=0;
    setInterval(function(){
        imgs[index].addClass('animated zoomInUp');

    },1000)
}

///借还书统计
////当前到管统计数量
function librarycount(){
        var nums=$('.borrow_book_num');//从接口获得当前要统计的数据
        var num0=parseInt(nums[0].innerHTML);
        var num1=parseInt(nums[1].innerHTML);
        var num2=parseInt(nums[2].innerHTML);
        //setTimeout(function(){////今日到馆人次
        //    $(nums[0]).numberRock({
        //        speed:10, //数字越大数字滚动速度越慢
        //        count:num0 //最终停留数字
        //    });
        //
        //},1000);
        //setTimeout(function(){////今日在馆人次
        //    $(nums[1]).numberRock({
        //        speed:10, //数字越大数字滚动速度越慢
        //        count:num1 //最终停留数字
        //    });
        //
        //},2000);
        //setTimeout(function(){////本周到馆人次
        //    $(nums[2]).numberRock({
        //        speed:20, //数字越大数字滚动速度越慢
        //        count:num2 //最终停留数字
        //    });
        //
        //},4000);

        var options = {
            useEasing : true,
            useGrouping : true,
            separator : ',',
            decimal : '.',
            prefix : '',
            suffix : ''
        };
        var demo = new CountUp("myTargetElement", 0, 80, 0, 2.5, options);
        var demo2 = new CountUp("myTargetElement2", 0, 400, 0, 2.5, options);
        var demo3 = new CountUp("myTargetElement3", 0, 6540000, 0, 2.5, options);
        setTimeout(function(){
            demo.start();

        },1000);
        setTimeout(function(){
            demo2.start();

        },2000);
        setTimeout(function(){
            demo3.start();

        },4000);

}
librarycount();///初始化先执行一次

///累计到馆统计
function totalCount(){
        ///下面是累计到馆人数假设总基数是100000
        var totalfheight=$('.totalPer .rectangle_bg').width();//获得背景色父元素的宽度
        var totalbarNum = parseInt($('.totalPer .rectangle>span:eq(0)').html());///获得斜条框元素
        var totalper = totalbarNum / 932626274;//算出百分比加上单位后面,这里先按照这个基数算
        var optionst = {
            useEasing : true,
            useGrouping : true,
            separator : ',',
            decimal : '.',
            prefix : '',
            suffix : ''
        };
        var demot = new CountUp("myTargetElementt",0,785623654,0,2.5,optionst);
        demot.start();
        //$('.rectangle').animate({width:totalper*totalfheight + "px"},2000);//给每个bar条高度上涨的动画
       $('.rectangle').animate({width:57+"%"},3000);

        //    speed:20,//数字越大数字滚动速度越慢
        //    count:totalbarNum//最终停留数字
        //});
}

/////不断获得圆环
function circleMove(){
    //获取对象实例
    var progObj = radialIndicator('#indicatorContainer' , {
        radius:60, //定义圆形指示器的内部的圆的半径。
        barBgColor:"#184660", //定义圆形指示器的刻度条的背景颜色。
        barColor:'rgba(182,70,93,1)', //指示器数值样式
        barWidth:14,
        minValue:0, //圆形指示器的最小值。
        maxValue:200,
        fontColor:'#fff',
        fontWeight:'normal',
        fontFamily:'Microsoft YaHei',
        initValue:34,
        //barWidth: 3/1080*h,
        //fontSize:1/1080*h,
        //radius: 50.5/1920*w,
        //format:' 人'
    });
//        progObj.animate($("#indicatorVue").val());
//        progObj.animate(43);


    var progObj1 = radialIndicator('#indicatorContainer1' , {
        radius:60, //定义圆形指示器的内部的圆的半径。
        barBgColor:"#184660", //定义圆形指示器的刻度条的背景颜色。
        barColor:'rgba(171,48,73,1)', //指示器数值样式
        barWidth:14,
//			percentage:true, //设置为true显示圆形指示器的百分比数值。
//			initValue:$("#indicatorVue").val(), //圆形指示器初始化的值。
        minValue:0, //圆形指示器的最小值。
        maxValue:100,
        fontColor:'#fff',
        fontWeight:'normal',
        fontFamily:'Microsoft YaHei',

    });
//        progObj.animate($("#indicatorVue").val());
//        progObj1.animate(36);




    var progObj2 = radialIndicator('#indicatorContainer2' , {
        radius:60, //定义圆形指示器的内部的圆的半径。
        barBgColor:"#184660", //定义圆形指示器的刻度条的背景颜色。
        barColor:'rgba(88,48,104,1)', //指示器数值样式
        barWidth:14,
//			percentage:true, //设置为true显示圆形指示器的百分比数值。
//			initValue:$("#indicatorVue").val(), //圆形指示器初始化的值。
        minValue:0, //圆形指示器的最小值。
        maxValue:200000,
        fontColor:'#fff',
        fontWeight:'normal',
        fontFamily:'Microsoft YaHei',

    });
    updateIndicator();
    updateIndicator1();
    updateIndicator2();
    setInterval(function(){
        updateIndicator();
    },15000);
    setInterval(function(){
        updateIndicator1();
    },15000);
    setInterval(function(){
        updateIndicator2();
    },15000);

    function updateIndicator() {
        progObj.animate(43);
        setTimeout(function(){
            progObj.animate(123);
        },5000);
        setTimeout(function(){
            progObj.animate(56);
        },10000);

    }
    function updateIndicator1() {
        progObj1.animate(36);
        setTimeout(function(){
            progObj1.animate(85);
        },5000);
        setTimeout(function(){
            progObj1.animate(36);
        },10000);

    }
    function updateIndicator2() {
        progObj2.animate(123967);
        setTimeout(function(){
            progObj2.animate(5468);
        },5000);
        setTimeout(function(){
            progObj2.animate(82396);
        },10000);

    }


    //function updateIndicator() {
    //    var val = $("#indicatorVue").val();
    //    progObj.animate(val);
    //}


}


